<template>
  <view class="container">
    <!-- Logo -->
    <image src="/static/logo.png" class="logo" mode="aspectFit"></image>
    <!-- 标题 -->
    <text class="title">欢迎登录</text>
    <!-- 输入框 -->
    <view class="input-container">
      <view class="input-item">
        <text class="input-label">手机号</text>
        <input class="input" v-model="phone" placeholder="请输入手机号" />
      </view>
      <view class="input-item">
        <text class="input-label">密码</text>
        <input :type="showPassword ? 'text' : 'password'" class="input" v-model="password" placeholder="请输入密码" />
        <!-- 眼睛图标按钮 -->
        <uni-icons :type="showPassword ? 'eye-slash' : 'eye'" size="20" color="#999" @click="togglePassword"></uni-icons>
      </view>
      <!-- 用短信验证码登录和忘记密码 -->
      <view class="hint-container">
        <text class="hint" @click="goToLogin1">用短信验证码登录</text>
        <text class="forgot-password" @click="goToFind">忘记密码</text>
      </view>
    </view>
    <!-- 登录按钮 -->
    <button class="login-btn" @click="handleLogin">登录</button>
    <!-- 注册链接 -->
    <text class="register-link" @click="goToRegister">没有账号？去注册</text>
  </view>
</template>


<script>
import { defineComponent, ref } from 'vue';
import { loginByPassword } from '@/api/login.js';

export default defineComponent({
  setup() {
    const phone = ref('');
    const password = ref('');
    const showPassword = ref(false); // 控制密码显示与隐藏

    const handleLogin = async () => {
      if (!phone.value) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        });
        return;
      }

      if (!/^\d{11}$/.test(phone.value)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none',
        });
        return;
      }

      if (!password.value) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none',
        });
        return;
      }
	  try {
	      const res = await loginByPassword(phone.value, password.value);
	      console.log("登录响应:", res);
	      // ✅ 直接使用 API 层返回的业务数据
        // console.log("rtoken",res.data.data);
	      uni.setStorageSync('token', res.data.data);  // 存储 Token
	      uni.showToast({ title: '登录成功', icon: 'success' });
	      uni.switchTab({ url: '/pages/huiyi/huiyi' });
	    } catch (error) {
	      uni.showToast({ 
	        title: error.message.includes('手机号') 
	          ? error.message 
	          : '登录失败，请重试',
	        icon: 'none'
	      });
	    }
	  };

    // 跳转到注册页面
    const goToRegister = () => {
      uni.navigateTo({
        url: "/pages/login/register",
      });
    };

    // 跳转到短信验证码登录页面
    const goToLogin1 = () => {
      uni.navigateTo({
        url: "/pages/login/login1",
      });
    };

    // 跳转到找回密码页面
    const goToFind = () => {
      uni.navigateTo({
        url: "/pages/login/find",
      });
    };

    // 切换密码显示与隐藏
    const togglePassword = () => {
      showPassword.value = !showPassword.value;
    };

    return {
      handleLogin,
      goToRegister,
      goToLogin1,
      goToFind,
      phone,
      password,
      showPassword,
      togglePassword,
    };
  },
});
</script>



<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 50px;
}

.input-container {
  width: 95%; /* 调整宽度为 90% */
}

.input-item {
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: -1px; /* 共享边框 */
  background-color: white; /* 背景色 */
  padding: 0 10px; /* 内边距 */
}

.input-label {
  font-size: 14px;
  color: #333;
  width: 60px; /* 提示词宽度 */
}

.input {
  flex: 1;
  height: 40px;
  border: none; /* 去掉输入框边框 */
  font-size: 14px; /* 与提示词大小一致 */
  padding-left: 10px; /* 左边距 */
}

.input-item:first-child {
  border-top: 1px solid #ccc; /* 第一个输入框保留上边框 */
}

.input-item:last-child {
  border-bottom: 1px solid #ccc; /* 最后一个输入框保留下边框 */
}

.hint-container {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  margin-top: 8px; /* 调整上方间隙 */
}

.hint {
  font-size: 12px;
  color: #3ab54a;
}

.forgot-password {
  font-size: 12px;
  color: #3ab54a;
}

.login-btn {
  width: 60%; /* 调整宽度 */
  height: 40px;
  background-color: #3ab54a;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-top: 50px;
}

.register-link {
  font-size: 12px;
  color: #3ab54a;
  margin-top: 20px;
}
</style>
